<template>
  <div class="list-wrapper">
    <filtrate :fetchData="fetchData"></filtrate>
    <h4>培训师课时数统计</h4>
    <div class="return">
      <span class="el-icon-d-arrow-left"></span>
      <router-link to="/dashboard/trainerHour">
        <span>返回图表</span>
      </router-link>
    </div>
		<div class="list-top">
      <div>
        <span>教师编号：</span>  
        <span @click="goTrainerDetail" style="cursor:pointer;margin-right:100px">{{info.number}}</span>              
        <span>教师姓名：</span>
        <span @click="goTrainerDetail" style="cursor:pointer">{{info.name}}</span>
      </div>
			<el-button type="primary" @click="exportData">下载</el-button>
		</div>
		<table class="list-table" border="0" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>序号</th>
          <th>日期</th>
          <th>课程名称</th>
          <th>授课/模拟器</th>
					<th>课时数</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in list" :key="index">
					<td>{{index+1}}</td>
          <td>{{item.date}}</td>
					<td @click="goCourseDetail(item.courseid)">{{item.course}}</td>
          <td>{{item.type}}</td>
          <!-- <td @click="goTrainingDetail(item.trainingid)">{{item.date}}</td> -->
          <td>{{item.time}}</td>
				</tr>
        <tr>
          <td>合计</td>
          <td></td>
          <td></td>
          <td></td>
          <td>{{total}}</td>
        </tr>
			</tbody>
		</table>
		<!-- <div class="pagination">
      <el-pagination v-if="list.length" @current-change="handleCurrentChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <div class="mess" v-if="!list.length">暂无数据</div>
    </div> -->
	</div>
</template>
<script>
import filtrate from "../filtrate";

export default {
  data() {
    return {
      page: 1,
      total: 0,
      id: "",
      filData: {},
      info: {},
      list: [],
      trainerId: "",
      total: 0
    };
  },
  components: {
    filtrate
  },
  methods: {
    fetchData(time, type) {
      let data = {
        time: time ? time : "",
        courseType: type ? type : "",
        id: this.id,
        // page: this.page
      };
      this.apiPost("Dashboard/trainerHourDetail", data).then(res => {
        this.info = res.info;
        this.list = res.list;
        this.trainerId = res.info.id;
        // this.total = res.total;
        res.list.forEach(item=>{
          this.total += item.time
        })
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.filData) {
        this.fetchData(this.filData.time, this.filData.courseType);
      } else {
        this.fetchData();
      }
    },
    goCourseDetail(id) {
      window.open(SITE+"course/detail/"+id);
    },
    goTrainingDetail(id) {
      window.open(SITE+"training/listDetail/"+id);
    },
    goTrainerDetail(){
      window.open(SITE+"operate/manpower/listDetail/"+this.trainerId);      
    },
    exportData(){
      this.list.forEach((item,index)=>{
        item['index'] = index+1
      })
      let one = {
        index: '合计',
        time: this.total
      }
      this.list.push(one)
      require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          const tHeader = ['序号', '日期', '课程名称', '授课/模拟器操作', '课时数']
          const filterVal = ['index', 'date', 'course', 'type', 'time']
          const data = this.formatJson(filterVal, this.list)
          export_json_to_excel(tHeader, data, this.info.name+'课时统计')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.filData = Lockr.get("filData");
    if (this.filData) {
      this.fetchData(this.filData.time, this.filData.courseType);
    } else {
      this.fetchData();
    }
  }
};
</script>
<style lang="css" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.list-wrapper > h4 {
  text-align: center;
  padding-top: 20px;
}
.el-icon-d-arrow-left {
  margin: 0 5px 10px 0;
  font-size: 14px;
}
.return{
  padding-left: 20px;
}
.return a{
  color: #333;
}
.list-top{
  padding: 0 20px 10px;
}
.pagination {
  text-align: center;
  margin-top: 30px;
}
.mess {
  color: #666;
}
</style>
